<template>
  <view class="search-header">
    <view class="search-input">
      <input type="text" placeholder="请输入商家名，品类或商区" placeholder-class="placeholder" v-model="keyword" @confirm="onSearch"/>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const keyword = ref('')
const emit = defineEmits(['search'])

const onSearch = () => {
  emit('search', keyword.value)
}
</script>

<style lang="scss" scoped>
.search-header {
  padding: 10px 15px;
  background: #fff;

  .search-input {
    display: flex;
    align-items: center;
    background: #F7F7F7;
    border-radius: 20px;
    padding: 8px 15px;

    input {
      flex: 1;
      margin-left: 10px;
      font-size: 14px;
    }

    .placeholder {
      color: #999;
    }
  }
}
</style>
